<ui:composition
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:p="http://primefaces.org/ui"
        xmlns:ui="http://java.sun.com/jsf/facelets">

    <div class="topbar clearfix">
        <a id="omega-menu-button" href="#">
            <span class="fa fa-bars"></span>
        </a>

        <span class="topbar-title"><ui:insert name="title"></ui:insert></span>

        <a id="options-menu-button" href="#">
            <span class="fa fa-ellipsis-h"></span>
        </a>

        <div id="topbar-icons" class="animated">
            <span class="topbar-search">
                <input type="text" placeholder="Search"/>
                <span class="topbar-search-icon fa fa-search"></span>
            </span>
            <a href="#">
                <span class="topbar-item-text">Messages</span>
                <span class="topbar-icon fa fa-envelope-o animated swing"></span>
                <span class="topbar-badge animated rubberBand">5</span>
            </a>
            <p:link outcome="/views/user-setting.xhtml">
                <span class="topbar-item-text">设置</span>
                <span class="topbar-icon fa fa-gear"></span>
            </p:link>
            <a href="#">
                <span class="topbar-item-text">User</span>
                <span class="topbar-icon fa fa-user"></span>
            </a>
        </div>
    </div>

</ui:composition>